import { RocketOutlined } from "@ant-design/icons";
import React, {useState} from "react";
import {ClsControl} from "../../block-control";
import {ControlBar} from "../../control-bar";
import {MyIcon, SuTitle} from "../../su-title";
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import {changeJobIntentDisplay, getCityList, getJobIntentData, JobIntentPayload, saveJobIntent} from "../../../redux";
import st from '../resume-basic-informatiion/r-basic-information.module.css'
import {Col, Modal, Row, Form, Select, Input, Checkbox} from "antd";

const { Option } = Select;


interface PropsType {

}


export const RJobIntent: React.FC<PropsType> = ({}) => {

    const dispatch = useAppDispatch();
    const jobIntentItem = useAppSelector(getJobIntentData)
    const cityList = useAppSelector(getCityList)
    const jobIntentList = Object.entries(jobIntentItem).map(([k, item]) => ({
        infoKey: k, ...item
    }));

    const defaultFormValue = Object.entries(jobIntentItem).reduce((fv, d) => {
        const [k, {value}] = d;
        fv[k] = value;
        return fv;
    }, {} as JobIntentPayload)

    // state
    const [open, setOpen] = useState(false)
    // form
    const [ form ] = Form.useForm();
    const [ displayForm ] = Form.useForm();

    const jobtype = [ '社招', '校招', '实习' ]
    const expectindustry = [
        '电子/半导体/集成电路', '电子商务', '互联网', 'IT服务', '计算机软件', '计算机硬件'
    ]

    function editIntentInfo() {
        setOpen(true)
    }

    function modal(): JSX.Element {
        return <>
            <Modal
                width={900}
                okText={'保存'}
                cancelText={'取消'}
                open={open}
                centered={true}
                onOk={() => {
                    setOpen(false)
                    const formV = form.getFieldsValue(true)
                    const displayFormV = displayForm.getFieldsValue(true)
                    dispatch(saveJobIntent(formV))
                    dispatch(changeJobIntentDisplay(displayFormV))
                }}
                onCancel={() => {
                    setOpen(false)
                }}
            >
                <Row gutter={16} justify={"center"}>
                    <span style={{height: 50, fontSize: '1.5rem', color: 'burlywood', display: 'block', margin: '16px'}}>编辑求职意向</span>
                    <Col span={20}>
                    <Form
                        name='jobIntent'
                        form={form}
                        initialValues={defaultFormValue}
                        labelCol={{span: 6}}
                        wrapperCol={{span: 18}} >
                    <Form.Item label='意向岗位' name='intentPost'  >
                        <Select
                            placeholder=''
                            allowClear={true}
                        >
                            <Option value='web前端开发'>web前端开发</Option>
                            <Option value='大数据'>大数据</Option>
                            <Option value='java后端开发'>java后端开发</Option>
                            <Option value='c++'>c++</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label='意向城市' name='intentCity'  >
                        <Select
                            placeholder='意向城市'
                            allowClear={true}
                            filterOption={(input, option) => {
                                return (option?.value as string ?? '').toLowerCase().includes(input.toLowerCase())
                            }}
                        >
                            { cityList.map(city => ( <Option key={city} value={city}>{city}</Option> )) }
                        </Select>
                    </Form.Item>

                    <Form.Item label='期望薪资' name='expectedSalary' >
                        <Input placeholder='100k'/>
                    </Form.Item>

                    <Form.Item label='求职类型' name='jobType' >
                        <Select
                            placeholder='社招 - 校招 - 实习'
                            allowClear={true}
                        >
                            {
                                jobtype.map(t => ( <Option key={t} value={t}>{t}</Option>)   )
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label='期望行业' name='expectIndustry' >
                        <Select
                            placeholder='互联网 - IT服务'
                            allowClear={true}
                        >
                            {
                                expectindustry.map(t => ( <Option key={t} value={t}>{t}</Option>)   )
                            }
                        </Select>
                    </Form.Item>
                    </Form>
                    </Col>
                    <Col span={4}>
                        < Form
                            name={'displayControlForm'}
                            form={displayForm}
                        >
                            {
                                jobIntentList.map(({infoKey, display}) => (
                                    <Form.Item key={infoKey}
                                               name={infoKey}
                                               valuePropName={'checked'}
                                               initialValue={display}
                                               wrapperCol={{ offset: 8, span: 16 }}>
                                        <Checkbox checked={display} />
                                    </Form.Item>
                                ))
                            }
                        </Form>
                    </Col>
                </Row>
            </Modal>
        </>
    }

    return <ClsControl canDrag={true} controlBar={
        <ControlBar onClickEdit={editIntentInfo} style={{top: 0}} displayConfig={{ edit: true}}></ControlBar>
    } >
        {modal()}
        <SuTitle title={'求职意向'} icon={
            <MyIcon type='gongzuoyixiang' />
        }/>
        <Row style={{padding: 14}} gutter={20}>
            {
                jobIntentList.filter(d => d.display).map(({defaultValue, value, infoKey}) => (
                    <Col key={infoKey} style={{height: 28}} span={12}>
                        <span className={st['rb-info-label']}>{defaultValue}:  </span>
                        <span className={st['rb-info-value']}>{value || defaultValue}</span>
                    </Col>
                ))
            }
        </Row>
    </ClsControl>
}
